<template>
  <div>
    <div v-if="!isNewUser">
      <HeaderTop :enable-shadow="true"/>
    </div>

    <div class="al-box-container al-bg-color-white">
      <div>
        <ALImage :src="chahua" style="opacity: 0.08"/>
      </div>

      <el-dialog
              width="30%"
              title="修改密码"
              :visible.sync="updatePasswordDialogVisible"
              append-to-body>
        <UpdatePasswordComponent/>
      </el-dialog>

      <div class="al-width-30 al-bg-color-white" style="margin-top: -600px">
        <div v-if="isNewUser" class="al-title-h2">Hello，欢迎来到熊猫约拍，请完善您的信息</div>
        <div class="">
          <el-dialog title="上传头像"
                     :visible.sync="uploadAvatarDialogVisible">

            <div class="al-box-container">
              <span class="al-m-20px">点击选择图片</span>
              <el-upload
                      class="avatar-uploader"
                      :action="uploadUrl"
                      :data="uploadData"
                      :show-file-list="false"
                      :auto-upload="true"
                      :on-success="handleAvatarSuccess"
                      :before-upload="beforeAvatarUpload">
                <ALImage v-if="imageUrl != ''" :src="imageUrl" round class="al-box-size-100px" />
                <i v-else class="el-icon-plus avatar-uploader-icon  al-show-border-light-blue al-box-radius"></i>
              </el-upload>
            </div>

            <span slot="footer" class="dialog-footer">
<!--              <el-button round @click="uploadAvatarDialogVisible = false">取 消</el-button>-->
              <el-button round type="primary" @click="uploadAvatarDialogVisible = false">确 定</el-button>
            </span>
          </el-dialog>
        </div>

        <div class="al-flex-justify-space-between al-m-top-20px al-m-bottom-20px">
          <ALImage :src="tempUserInfo.avatar" round class="al-width-25"/>
          <el-link :underline="false" @click="uploadAvatarDialogVisible = true">更换头像</el-link>
        </div>

        <el-form :model="tempUserInfo" class="">

          <el-form-item label="用户名">
            <el-input v-model="tempUserInfo.username"
                      disabled
                      class=""
                      autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item v-if="!isNewUser" label="密码" label-width="" class="">
            <div class="">
              <el-input disabled value="******"/>
            </div>
            <el-link type="primary" class="al-display-inline" @click="updatePasswordDialogVisible = true">
              修改密码
            </el-link>
          </el-form-item>

          <el-form-item label="昵称">
            <el-input v-model="tempUserInfo.nickname"
                      class=""
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="tempUserInfo.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="手机">
            <el-input v-model="tempUserInfo.phone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="邮箱：请填写邮箱，否则无法接收邮件提醒" :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]">
            <el-input v-model="tempUserInfo.email" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <el-input v-model="tempUserInfo.city" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="tempUserInfo.gender"
                       style="width: 100%"
                       placeholder="请选择性别">
              <el-option label="男" :value="1"></el-option>
              <el-option label="女" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="身份">
            <el-select v-model="tempUserInfo.identity"
                       style="width: 100%"
                       placeholder="请选择身份">
              <el-option label="摄影师" :value="1"></el-option>
              <el-option label="模特" :value="2"></el-option>
              <el-option label="普通用户" :value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <div class="al-width-100 al-flex-container-center-h al-m-bottom-20px " v-if="isNewUser">
          <div>
            <el-button round @click="goPage('/index')">跳过</el-button>
          </div>
          <div class="al-box-size-20px"></div>
          <div>
            <el-button type="primary" round @click="updateUserInfo">保 存</el-button>
          </div>
        </div>

        <div v-else class="al-width-100 al-flex-container-center-h al-m-bottom-20px">
          <div>
            <el-button type="primary" round @click="updateUserInfo">保 存</el-button>
          </div>
        </div>
      </div>
    </div>


    <ALFooter v-if="!isNewUser"/>
  </div>
</template>

<script>
  import HeaderTop from "../../components/public/HeaderTop";
  import ALFooter from "../../components/public/ALFooter";
  import {request} from "../../util/network/request";
  import {USER_GET_BY_ID, USER_UPDATE} from "../../util/network/api/user/api-user";
  import ALImage from "../../components/public/ALImage";
  import {IMAGE_UPLOAD_RETURN_URL} from "../../util/network/api/image/api-image";
  import eventBus from "../../util/bus/eventBus";
  import UpdatePasswordComponent from "./component/UpdatePasswordComponent";

  export default {
    name: "SetUserInfo",
    //组件
    components: {UpdatePasswordComponent, HeaderTop, ALFooter, ALImage},
    //属性
    props: {},

    //数据
    data() {
      return {
        chahua: 'https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/chahua/undraw_personal_info_0okl.png',
        userInfo: {
          uid: this.$route.params.uid
        },
        tempUserInfo: {
          uid: this.$store.state.storeUserInfo.id,
          username: this.$store.state.storeUserInfo.username,
          nickname: this.$store.state.storeUserInfo.nickname,
          avatar: this.$store.state.storeUserInfo.avatar,
          age: this.$store.state.storeUserInfo.age,
          gender: this.$store.state.storeUserInfo.gender,
          city: this.$store.state.storeUserInfo.city,
          identity: this.$store.state.storeUserInfo.identity,
          isAuthenticated: this.$store.state.storeUserInfo.isAuthenticated,
          phone: this.$store.state.storeUserInfo.phone,
          email: this.$store.state.storeUserInfo.email,
          createTime: this.$store.state.storeUserInfo.createTime,
          updateTime: this.$store.state.storeUserInfo.updateTime,
        },
        imageUrl: '',
        uploadUrl: 'http://47.103.204.62:8764/api/v1/' + IMAGE_UPLOAD_RETURN_URL,
        uploadData: {
          uid: this.$store.state.storeUserInfo.id,
          isAlbum: 0
        },
        isNewUser: false,
        flag: this.$route.params.flag,
        updatePasswordDialogVisible: false,
        uploadAvatarDialogVisible: false,
      }
    },

    //挂载完成时
    mounted() {
      this.getNewUser();
    },

    //方法
    methods: {
      goPage(path) {
        this.gotoPage(path);
      },

      //更新用户信息
      updateUserInfo() {
        // console.log(this.tempUserInfo);
        request({
          url: USER_UPDATE,
          // url: 'http://localhost:8764/api/v1/user/update',
          method: 'post',
          data: this.qsParam(this.tempUserInfo),
        }).then(res => {
          // console.log(res);
          if (res.data.code == 1) {
            this.$message.success("更新成功");
            this.getUserInfoById(this.userInfo.uid);
            this.goPage("/index");
          }
        }).catch(err => {
          console.log(err);
          this.$message("更新失败");
        })
      },

      handleAvatarSuccess(res, file) {

        this.imageUrl = URL.createObjectURL(file.raw);
        console.log("上传成功的url");
        console.log(res);
        this.tempUserInfo.avatar = res;
      },
      beforeAvatarUpload(file) {

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      },

      //判断是否是新用户进来此页面
      getNewUser() {
        if (this.flag === 0 || this.flag === "0") {
          this.isNewUser = true;
        }
      },

      //通过用户id获取用户信息
      getUserInfoById(uid) {
        request({
          url: USER_GET_BY_ID + uid,
        }).then(res => {
          console.log(res);
          this.$store.commit("setStoreUserInfo", res.data.data);
          localStorage.setItem("userinfo", JSON.stringify(res.data.data));
          this.userInfo = res.data.data;
        }).catch(err => {
          console.log(err)
        })
      },

      //头像上传
      submitUpload() {
        this.$refs.upload.submit();
      },

    },


    //计算属性
    computed: {},

    //监听
    watch: {}
  }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .box-bg {
    background-image: url("https://alanlee-panda-appointment.oss-cn-shenzhen.aliyuncs.com/images/chahua/undraw_personal_info_0okl.png");
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: right top;

  }

</style>
